<script setup lang="tsx">
import SpikeVue from './Spike.vue';
// jsx/tsx配合setup函数
// 1. 不写render函数, 使用函数包裹, 函数内return结构
// 2. 在组件的template标签中 将函数当做标签使用即可
import { ref } from 'vue'
// jsx的语法 
// 1. 解析变量/动态绑定 使用 {数据} vue的所有指令都不会在jsx中生效
// 2. 绑定事件 onClick  onMousexxx 传参  onClick={() => addN(8)}
// 3. 条件渲染 可以写三元表达式(有结果的语句)  不能在jsx中出现分支语句
// 4. jsx中循环 map方法
// 5. jsx中所有的标签都得闭合
// 6. 注释 花括号包裹 { /**注释代码  */}
const num = ref(100)
const str = '我是xx'
const id = 'box'
const age = ref(19) // 如果age >=18 渲染成年人 反之 渲染 未成年
const list = ref([
  { id: 1, content: "吃饭", done: true },
  { id: 2, content: "睡觉", done: false },
  { id: 3, content: "打代码", done: true },
  { id: 4, content: "喝水水", done: true },
  { id: 5, content: "拉粑粑", done: true },
]);
// 加1的方法
const add = () => {
  num.value++
}
const addN = (n: number) => {
  num.value += n
}
const res = () => {
  if (age.value >= 18) {
    return <strong>成年人</strong>
  } else {
    return <strong>未成年</strong>
  }
}
const vnode = () => {
  return (
    <div>
      { // 注释
      }
      { /**ssahjkhskhk ssas  */}
      <SpikeVue />
      <h2 id={id} title={str}>大标题-{num.value}</h2>
      <button onClick={add}>加1</button>
      <button onClick={() => addN(8)}>加N</button>
      <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
      </ul>
      {age.value >= 18 ? '成年人' : '未成年'}-
      {res()}
      <hr />
      {
        list.value.map(item => {
          return <div key={item.id}><ins>{item.content}</ins></div>
        })
      }
    </div>)
}
</script>
<template>
  <vnode></vnode>
  <!-- {{ age >= 18 ? '成年人' : '未成年' }} -->
  <!-- <p v-if="age >= 18">成年人</p>
  <p v-else>未成年</p> -->
</template>
<style scoped>
</style>

<!-- reatc做铺垫  vue开发还是 结构+script -->